<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="data.content">
        <button @click="add">add</button>

        <ul>
            <li v-for="(val, idx) in data.list">
                {{ val }}  <button @click="del(idx)">del</button>
            </li>
        </ul>

        {{ data.list.length }}<button @click="clear">clear</button>
    </div>

    <script type="module">
        import {createApp, reactive} from './js/vue.esm-browser.js'

        createApp({
            // setup选项，用于设置响应式数据和方法等 
            setup() {
                const data = reactive({
                    content: "www.baidu.com",
                    list: ["www.baidu.com", "百度搜索"]
                })

                const add = ()=> {
                    data.list.push(data.content)
                    console.log(data.list);
                }

                const del = (idx)=> {
                    data.list.splice(idx, 1);
                }

                const clear = ()=>{
                    data.list = []
                }

                return {
                    data,
                    add,
                    del,
                    clear
                }
            }
        }).mount("#app")
    </script>
</body>
</html>